<template>
	<view class="content animated fadeIn fast">
		<view class="search-con">
			<view class="search-list">
				<block v-for="(value,key) in listData" :key="key">
				<view class="search-nr" @tap="ondoctTap(value.id)">
					<view class="avatarbox">
						<image :src="value.avatar" mode="aspectFill"></image>
					</view>
					<view class="search-nrxx">
						<view class="u-f u-f-jsb">
							<view class="xmtitle">
								<text class="telis">{{value.nickname}}wool兼职</text><text>{{value.titles}}</text>
							</view>
							<view class="zxbtn">+39.50</view>
						</view>
						<view class="">
							<view class="yytp u-f"><text>下载注册</text></view>
							<view class="yybox u-f u-f-jsb">
								<text>剩余68人</text><text>396人已赚</text>
							</view>
						</view>
					</view>
				</view>
				</block>
			</view>
		</view>
		<uni-load-more :status="status" :content-text="contentText" />
	</view>
</template>
<script>
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
export default {
	components: {
		uniLoadMore
	},
	data() {
		return {
			listData: [],
			reload: true,
			last_id: 0,
			status: 'more',
			contentText: {
				contentdown: '上拉加载更多',
				contentrefresh: '加载中',
				contentnomore: '没有更多'
			}
		};
	},
	onLoad() {
		this.getList();
	},
	onReachBottom() {
		this.status = 'more';
		this.getList();
	},
	methods: {
		getList() {
			let data = {
				//column: 'id,post_id,title,author_name,cover,published_at' //需要的字段名
			};
			var pgs=10;
			if (this.last_id>0) {
				//说明已有数据，目前处于上拉加载
				this.status = 'loading';
				data.page = this.last_id;
				data._ = new Date().getTime() + '';
			}
			data.token = pgs;
			uni.request({
				url: this.config.webUrl+'/apip/index/doctor',
				data: data,
				success: data => {
					if (data.data.code==1) {
						//console.log(data.data)
						let list = this.setTime(data.data.data);
						this.listData = this.reload ? list : this.listData.concat(list);
						this.reload = false;
						this.last_id = this.last_id+1;
						
						if(data.data.countpage<this.last_id){
							this.status = '';
						}
					}
				},
				fail: (data, code) => {
				}
			});
		},
		setTime(items) {
			var newItems = [];
			items.forEach(e => {
				var str=e.headimgurl;
				if(str.indexOf("http") != -1){
					var urls=e.headimgurl;
				}else{
					var urls=this.config.imgUrl+e.headimgurl;
				}
				newItems.push({
					nickname: e.nickname,
					avatar:urls,
					id: e.id,
					titles: e.titles,
					yyname:e.yyname,
					department:e.department,
					seeksum:'+29.50',
					bio:e.techang
				});
			});
			return newItems;
		},
		ondoctTap(id){
			uni.navigateTo({
				url: `/pages/doctor/doctor?id=${id}`
			})
		}
	}
};
</script>

<style>
page {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	background-color: #fff;
}

view {
	font-size: 28upx;
	line-height: inherit;
}
.telis{
	height: 22px;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
.yybox{
	color: #666;
}
.yytp{
	color: #666;
}
.searchsc{
	margin-top: 5px;
	color: #999;
	font-size: 28upx;
	padding-left: 90px;
	box-sizing: border-box;
	text-align:justify;
	text-align-last: left;
	overflow:hidden; 
	text-overflow:ellipsis;
	display:-webkit-box; 
	-webkit-box-orient:vertical;
	-webkit-line-clamp:3; 
}
.search-con{
	padding:0upx 20upx;
	box-sizing: border-box;
}
.search-jcrs{
	color: #999;
}
.search-jcrs text{
	font-size: 28upx;
	font-weight: bold;
	color: #d1632d;
}
.zxbtn{
	color: #F17503;
	font-size: 32upx;
	height: 46upx;
	font-weight: 500;
	line-height: 46upx;
	border-radius: 28upx;
}
.search-nr{
	width: 100%;
	min-height: 88px;
	padding: 20upx;
	margin: 20upx auto;
	border-radius: 16upx;
	-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.08);
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.08);
	margin: 20upx auto;
	background: #fafafa;
	position: relative;
	overflow: hidden;
}
.avatarbox{
	position: absolute;
	top: 32upx;
	left: 20upx;
	width:110upx;
	height: 110upx;
	border-radius: 50%;
	overflow: hidden;
}
.avatarbox image{
	width: 110upx;
	height: 110upx;
	border-radius: 50%;
}
.search-nrxx>view{
	padding-left: 140upx;
}
.xmtitle text:last-child{
	color: #999;
	font-size: 24upx;
}
.xmtitle text:first-child{
	color: #666;
	font-size: 32upx;
	padding-right: 10upx;
	font-weight: bold;
}
.satl-img{
	position: absolute;
	top:140upx;
	left:140upx;
	width: 28upx;
	height: 28upx;
	
}
</style>
